<!--
  Copyright [2025] [OBARA (Nanjing) Electromechanical Co., Ltd]

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->


{% extends 'base.html' %}

{% block title %}登录 - 小原焊枪选型数据库{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card fade-in-up">
            <div class="card-header text-center">
                <h2 class="mb-0">
                    <i class="bi bi-box-arrow-in-right me-2"></i>
                    用户登录
                </h2>
                <p class="mb-0 mt-2 text-light">与世界汽车工业共成长 | Develop with global automobile industry together</p>
            </div>
            <div class="card-body p-5">
                <div class="row">
                    <div class="col-md-6">
                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            <div class="mb-4">
                                <label for="username" class="form-label">
                                    <i class="bi bi-person me-2"></i>
                                    用户名 | Username
                                </label>
                                <input type="text" 
                                       class="form-control" 
                                       id="username" 
                                       name="username" 
                                       placeholder="请输入用户名"
                                       required>
                                <div class="invalid-feedback">
                                    请输入用户名
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <label for="password" class="form-label">
                                    <i class="bi bi-lock me-2"></i>
                                    密码 | Password
                                </label>
                                <input type="password" 
                                       class="form-control" 
                                       id="password" 
                                       name="password" 
                                       placeholder="请输入密码"
                                       required>
                                <div class="invalid-feedback">
                                    请输入密码
                                </div>
                            </div>
                            
                            <div class="mb-4 form-check">
                                <input type="checkbox" class="form-check-input" id="agreementCheck" required>
                                <label class="form-check-label" for="agreementCheck">
                                    已阅读并同意 小原焊枪选型数据库 的 <a href="/static/pdf/用户协议.pdf" target="_blank">使用协议</a> 和 <a href="/static/pdf/隐私政策.pdf" target="_blank">隐私政策</a> 
                                </label>
                                <div class="invalid-feedback">
                                    请勾选此项以同意使用协议
                                </div>
                            </div>
                            
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary btn-lg" id="loginButton" disabled>
                                    <i class="bi bi-box-arrow-in-right me-2"></i>
                                    登录
                                </button>
                            </div>
                            
							<br>
							<br>
							<div class="alert alert-info">
								<strong>安全策略说明</strong>
								<span style="color: red;">
                                <p class="mb-2">
                                    1.初次分发得到的账户密码有效期默认5天，单次批量下载大小200MB,每日最大下载文件数100个。
								</p>
								<p class="mb-2">
									2.账号被限制登录/下载，请联系您的营业经理进行账号续期和下载配额更新。
                                </p>
								<p class="mb-0">
									3.图纸模型数据为我公司技术机密，登录后代表您同意相关安全策略。服务器将自动监测数据访问情况，对于非法获取数据的行为，我们将依法采取相应措施，以保障数据安全。
                                </p>
								</span>
							</div>
                        </form>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="ps-md-4">
                            <h4 class="mb-3">
                                <i class="bi bi-question-circle me-2"></i>
                                如何获得用户名 | How to get Username
                            </h4>
                            <div class="alert alert-info">
                                <p class="mb-2">
                                    小原焊枪选型数据库用户名及密码由小原（南京）机电有限公司技术开发部门统一分发，
                                    焊枪参数及图纸模型数据为我公司技术机密，除用作产品选型作用外禁作它用。
                                </p>
                                <p class="mb-0 small">
                                    The Username and Password of OBARA Welding Gun Selection Database are uniformly 
                                    distributed by the Technical Development Department of OBARA (Nanjing) Mechanical 
                                    and Electrical Co., Ltd. The pictures and drawings of welding Gun are confidential 
                                    for our company. It is forbidden to use them for other purposes except for product selection.
                                </p>
                            </div>
                            
                            <h4 class="mb-3 mt-4">
                                <i class="bi bi-telephone me-2"></i>
                                联系我们 | Contact Us
                            </h4>
                            <div class="contact-info">
                                <p class="mb-2">
                                    <i class="bi bi-building me-2"></i>
                                    <strong>小原（南京）机电有限公司</strong>
                                    <br>
                                    <small class="text-muted">OBARA (Nanjing) Electromechanical Co., Ltd</small>
                                </p>
                                <p class="mb-2">
                                    <i class="bi bi-geo-alt me-2"></i>
                                    <strong>地址：</strong>
                                    <a href="https://j.map.baidu.com/73/Y8F" 
                       target="_blank" class="text-decoration-none">
                        中国·南京市江宁区仁杰路28号
                    </a>
                                    <br>
                                    <small class="text-muted">No.28,Renjie Road,Jiangning District,Nanjing China</small>
                                </p>
                                <p class="mb-2">
                                    <i class="bi bi-telephone me-2"></i>
                                    <strong>营业直线：</strong>(025 )52106195
                                    <br>
                                    <small class="text-muted">Sales Department: (025)52106195</small>
                                </p>
                                <p class="mb-0">
                                    <i class="bi bi-envelope me-2"></i>
                                    <strong>营业部门邮箱：</strong>
                                    <a href="mailto:lufm@obara.com.cn" class="text-decoration-none">lufm@obara.com.cn</a>
                                    <br>
                                    <small class="text-muted">IT Department Email: lufm@obara.com.cn</small>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 表单验证
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            var forms = document.getElementsByClassName('needs-validation');
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {
                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);
    })();

    // 加强的登录按钮启用/禁用逻辑
    function validateForm() {
        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value.trim();
        const agreementCheck = document.getElementById('agreementCheck').checked;
        const loginButton = document.getElementById('loginButton');
        
        // 只有当用户名、密码都不为空且勾选了协议时，才启用登录按钮
        if (username && password && agreementCheck) {
            loginButton.disabled = false;
        } else {
            loginButton.disabled = true;
        }
    }

    // 监听所有相关字段的变化
    document.getElementById('username').addEventListener('input', validateForm);
    document.getElementById('password').addEventListener('input', validateForm);
    document.getElementById('agreementCheck').addEventListener('change', validateForm);
    
    // 页面加载时初始化验证状态
    document.addEventListener('DOMContentLoaded', validateForm);
</script>
{% endblock %}
